<template>
  <div>
    <p >
      用户名称 <input type="text" placeholder="用户名称查询" v-model="one" />
    </p>
    <br /><br />
    <p style="position:absolute; right:50px;top:200px">
      <el-button icon="el-icon-search" type @click="chaxun">查询</el-button>
      <el-button type="danger" icon="el-icon-delete" text>重置</el-button>
    </p>
    <br />
    <div >
      <el-button type="radio" @click="dialogFormVisible = true"
        >+添加人员</el-button
      >
      <el-dialog
        @closed="ad"
        title="+添加人员"
        :visible.sync="dialogFormVisible" >
        <el-form>
          <el-form-item label="账户名称" >
            <el-input v-model="two" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账户昵称" >
            <el-input v-model="three" autocomplete="off"></el-input>
            <el-form-item label="手机号码" >
              <el-input v-model="four" autocomplete="off"></el-input>
              <el-form-item label="账号密码">
                <el-input  v-model="five" autocomplete="off"></el-input>
              </el-form-item>
            </el-form-item>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <br />

    <div>
      <el-table :data="newtableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border style="width: 100%">
        <el-table-column fixed prop="id" label="id" width="150">
        </el-table-column>
        <el-table-column prop="userid" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="username" label="用户昵称" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180">
        </el-table-column>
        <el-table-column prop="bum" label="部门" width="200"> </el-table-column>
        <el-table-column prop="gangwei" label="岗位" width="200">
        </el-table-column>
        <el-table-column prop="time" label="创建时间" width="200">
        </el-table-column>
        <el-table-column label="Action" width="400">
          <template >

            <el-button type="text" @click="dialogFormVisible = true"
        >设置组织</el-button>
        <el-button type="text" @click="dialogFormVisible = true"
        >重置密码</el-button>
  <el-button type="text" size="small" @click="dele(index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      
    </div>
    <br />
    <div class="block" style="position: relative; left: 40%">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4]"
        :page-size='pagesize'
        layout="total,sizes, prev, pager, next, jumper"
        :total="newtableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize=val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
    },
    dele(idx) {
      this.newtableData.splice(idx, 1);
    },
    chaxun() {
      var y = this.one;
      this.newtableData = this.newtableData.filter(function (x) {
        return x.userid == y;
      });
    },
    change(x){this.newlist[x]},
    ad() {
      this.newtableData.push({
        id: this.newtableData.length + 1,
        userid: this.two,
        username: this.three,
        phone: this.four,
        bum: "",
        gangwei: "",
        time: "2021-06-09",
      });
    },
    getPlayList() {
      //  console.dir(this.axios);
      //this.axios.get()
      //this.axios.post()

      this.axios.get("http://129.28.14.245:5000/banner").then((res) => {
        console.log(res);
        //this.cat=res.data.tags
        //this.tableData=res.data.banners
      });
    },
  },

  data() {
    return {
      wid:'100%',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      one: "",
      two: "",
      three: "",
      four: "",
      five:'',
      currentPage: 1,
      pagesize:2,
      newtableData: [
        {
          id: 1,
          userid: "46444",
          username: "王小虎",
          phone: "18715623544",
          bum: "开发部 ",
          gangwei: " 组长",
          time: "2021-06-07 18:23:26",
        },
        {
          id: 1,
          userid: "123456",
          username: "王晓峰",
          phone: "18715623544",
          bum: "开发部 ",
          gangwei: " 组长",
          time: "2021-06-07 18:23:26",
        },
        {
          id: 1,
          userid: "44415",
          username: "王晓红",
          phone: "18715623544",
          bum: "开发部 ",
          gangwei: " 组长",
          time: "2021-06-07 18:23:26",
        }
      ],
    };
  },
};
</script>
